<template lang="jade">
  .match-result-annulus(:style="styles.goalAnnulus")
    .outer-circle(:style="styles.outerCircle")
    #goalAnnulus(:style="styles.annulus")
    .inter-circle(:style="styles.interCircle")
    .inter-text(:style="styles.interText")
      span 
        |总入球数
        br
        i.num 10
        br
        i.average 2.51/场
</template>

<style lang="less" scoped>
  .match-result-annulus{
    position:relative;
    float: left;
    margin-left: 14px;
    .outer-circle{
      position: absolute;
      top: 0;
      bottom :0;
      right: 0;
      left: 0;
      margin: auto;
      border: 1px solid #808080;
      border-radius: 100%;
      background: transparent;
    }
    .inter-circle{
      position: absolute;
      top: 0;
      bottom :0;
      right: 0;
      left: 0;
      margin: auto;
      border-radius: 100%;
      background: #1E2024;
    }
    .inter-text{
      position: absolute;
      top: 0;
      bottom :0;
      right: 0;
      left: 0;
      margin: auto;
      border: 1px solid #808080;
      border-radius: 100%;
      background: transparent;
      span{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        text-align: center;
        height: 60px;
        color: #fff;
        font-size: 8px;
        line-height:20px;
        i.num{
          font-size: 28px;
          font-weight: 300;
        }
        i.average{
          color: #B3B3B3;
        }
      }
    }
  }
</style>

<script>
  import echarts from 'echarts'
  export default {
    props: {
        
    },
    data() {
      return {
        width: 310,
        height: 140,
      }
    },
    computed: {
      styles () {
        let self = this,
            goalAnnulus = {
              width: self.width + 'px',
              height: self.height + 'px'
            },
            annulus = {
              width: self.width + 'px',
              height: self.height + 'px'
            },
            outerCircle = {
              width: self.height + 'px',
              height: self.height + 'px'
            },
            interCircle = {
              width: self.height * 0.62  + 'px',
              height: self.height * 0.62 + 'px'
            },
            interText = {
              width: self.height * 0.56  + 'px',
              height: self.height * 0.56 + 'px'
            }

        return {
          goalAnnulus: goalAnnulus,
          annulus: annulus,
          outerCircle: outerCircle,
          interCircle: interCircle,
          interText: interText,
          
        }
      }
    },
    created() {
      let self = this
      
    },
    mounted() {
      let self = this
      var chart = echarts.init(document.getElementById('goalAnnulus'))
      chart.setOption({
        series: [
          {
                type:'pie',
                hoverAnimation: false,
                clockwise: false,
                radius: '94%',
                label: {
                    normal: {
                        formatter: function(params){
                            let res = '{t|'+params.name+'}\n{per|'+parseInt(params.percent)+'}\n{b|'+parseInt(params.percent)+'/场}'
                            return res
                        },
                        rich: {
                            t:{
                              fontSize: 8
                            },
                            b: {
                              fontSize: 8,
                              color: '#B3B3B3'
                            },
                            per: {
                                fontSize: 24,
                                color: '#fff',
                                fontWeight: 'lighter'
                            }
                        }
                    }
                },
                data:[
                    {
                        value:335, 
                        name:'主队入球数',
                        itemStyle:{
                            normal:{
                                color: '#F34141'    
                            }
                        }
                    },
                    {
                        value:310, 
                        name:'客队入球数',
                        itemStyle:{
                            normal:{
                                color: '#0CB2E2'    
                            }
                        }
                    }
                ]
          }
        ]
      })


    },

    methods: {
      
    },
    components: {
      
    }
    
  }
</script>